<script lang="ts" setup>
import BgWall from "./components/BgWall.vue";
import ThumbsUp from "./components/ThumbsUp.vue";
import Divider from "./components/Divider.vue";
import Intro from "./components/Intro.vue";
import { getRandomItems } from "@/utils";

const { play } = usePlay();
const { games, typeGameMap } = useGamesData();
const route = useRoute();

const currGame = computed(() =>
  games.value.find((item) => item.id == route.query.id)
);
const types = computed<any>(() => unref(currGame)?.types);

// 相同类型的游戏
const currTypeGames = computed(() =>
  unref(types)
    .map((type: string) => unref(typeGameMap[type]))
    .flat()
);
// 相同类型的游戏 不够14个就用其他类型的游戏补充到14个
const otherTypeGames = computed(() =>
  Object.keys(unref(typeGameMap))
    .filter((type) => !unref(types).includes(type))
    .map((type: string) => unref(typeGameMap[type]))
    .flat()
);
const mayLikeGames = computed(() => {
  const currTypeGamesLength = unref(currTypeGames).length;
  if (currTypeGamesLength >= 14) {
    return unref(currTypeGames);
  } else {
    return [
      ...unref(currTypeGames),
      ...getRandomItems(unref(otherTypeGames), 14 - currTypeGamesLength),
    ];
  }
});

// 取出前6个游戏
const sixGames = computed(() => {
  return mayLikeGames.value.slice(0, 6);
});
// 取出后8个游戏
const eightGames = computed(() => {
  return mayLikeGames.value.slice(6, 14);
});

const onPlay = () => {
  play(unref(currGame));
};

const ad3 = useGoogleAd("ad3");
</script>
<template>
  <div v-if="currGame">
    <BgWall :currGame="currGame" />
    <PlayBtn
      title="Play now"
      class="mt-[7px_!important] w-[263px_!important] h-[40px_!important] bg-[#FFDD12_!important] mb-[12px_!important]"
      @play="onPlay"
    />
    <ThumbsUp class="mb-20" :currGame="currGame" />
    <Advert v-bind="ad3" class="mb-12" />
    <Featured title="You may like" :data="sixGames" />
    <GameList :data="eightGames" />
    <Divider class="mb-42" />
    <Intro :currGame="currGame" />
  </div>
</template>
